<template>
    <el-dialog title="新增计划" :visible="visible" width="70%" center :show-close="false">
        <el-form :inline="true" ref="addPlanform" :model="form" label-width="150px">
            <el-form-item label="投放计划名称:">
                <el-input size="small" placeholder="请输入计划名称" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="推广目标:">
                <el-input size="small" placeholder="请输入推广目标" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="投放媒体:">
                <el-input size="small" placeholder="请输入媒体" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="广告类型:">
                <el-input size="small" placeholder="请输入广告类型" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="推广素材:">
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="推广目标:">
                <el-input size="small" placeholder="请输入推广目标" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="网络制式(可多选)):">
                <el-checkbox-group v-model="form.checkList">
                    <el-checkbox label="1">4G</el-checkbox>
                    <el-checkbox label="2">wifi</el-checkbox>
                    <el-checkbox label="3">2G/3G</el-checkbox>
                    <el-checkbox label="4" disabled="">预留</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="IP所属地区(可多选):">
                <el-checkbox-group v-model="form.checkList">
                    <el-checkbox label="1">4G</el-checkbox>
                    <el-checkbox label="2">wifi</el-checkbox>
                    <el-checkbox label="3">2G/3G</el-checkbox>
                    <el-checkbox label="4" disabled="">预留</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="投放端(可多选):" class="form-sys">
                <el-checkbox-group v-model="form.checkList">
                    <el-checkbox label="1">iOS</el-checkbox>
                    <el-checkbox label="2">安卓</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="登录时间(单选):">
                <el-radio-group v-model="form.radio">
                    <el-radio :label="6">7天</el-radio>
                    <el-radio :label="9">15天</el-radio>
                    <el-radio :label="11">30天</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <el-form label-position="top">
            <el-form-item label="投放时间段:">
                <el-row type="flex">
                    <el-col :span="1"><el-checkbox @change="selectedAll" v-model="checkedAll"></el-checkbox></el-col>
                    <el-col class="dialog-check-item" @click.native="selectedHours(item, index)" :span="1" v-for="(item, index) in 24" :key="index + 'h'">{{
                        item
                    }}</el-col>
                </el-row>
                <el-row type="flex" v-for="(item, index) in 7" :key="index + 'd'">
                    <el-col class="dialog-check-item" @click.native="selectedDay(item, index)" :span="1">{{ weekString[index] }}</el-col>
                    <el-col :span="1" v-for="(it, i) in 24" :key="i">
                        <el-checkbox @change="selectedOnly(index, it)" :value="selectionData[index]['time'].includes(it)"></el-checkbox>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="cancelModal">取 消</el-button>
            <el-button size="small" type="primary" @click="cancelModal">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { weekString } from "./tableJson";
export default {
    name: "promotion-dialog",
    props: {
        visible: Boolean
    },
    data() {
        return {
            weekString,
            form: {
                checkList: []
            },
            selectionData: [{ time: [] }, { time: [] }, { time: [5] }, { time: [] }, { time: [] }, { time: [] }, { time: [] }],
            checkedAll: false,
            imageUrl: ""
        };
    },
    methods: {
        selectedAll(checked) {
            let resData = this.selectionData.map(item => {
                return {
                    ...item,
                    time: checked ? [...Array(25).keys()].slice(1, 25) : []
                };
            });
            this.selectionData = resData;
            this.checkedAll = checked;
        },
        selectedHours(hours) {
            let flag = 0;
            this.selectionData.forEach(item => {
                if (item.time.includes(hours)) {
                    flag++;
                }
            });
            let resData = this.selectionData.map(item => {
                if (flag >= 7) {
                    return {
                        ...item,
                        time: item.time.filter(f => f !== hours)
                    };
                } else {
                    return {
                        ...item,
                        time: item.time.includes(hours) ? item.time : [...item.time, hours]
                    };
                }
            });
            this.selectionData = resData;
        },
        selectedDay(day, index) {
            let resData = this.selectionData.map((item, i) => {
                return {
                    ...item,
                    time: index === i ? (item.time.length >= 24 ? [] : [...Array(25).keys()].slice(1, 25)) : item.time
                };
            });
            this.selectionData = resData;
        },
        selectedOnly(rowIndex, col) {
            let resData = [...this.selectionData];
            let timeArr = this.selectionData[rowIndex]["time"];
            if (timeArr.find(f => f === col)) {
                resData[rowIndex]["time"] = resData[rowIndex]["time"].filter(f => f !== col);
            } else {
                resData[rowIndex]["time"].push(col);
            }
            this.selectionData = resData;
            console.log(this.selectionData);
        },
        cancelModal() {
            this.$emit("update:visible", false);
            this.$refs.addPlanform.resetFields();
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        }
    }
};
</script>
<style lang="scss">
.dialog-check-item {
    cursor: pointer;
    &:hover {
        color: #45d0c5;
    }
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #45d0c5;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 60px;
    display: block;
}
.form-sys {
    min-width: 446px;
}
</style>
